<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>
	<body>
		<header class="header">
			<nav class="navbar navbar-inverse">
				<div class="container">


					<div class="navbar-header navbar-left">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a href="#" class="navbar-brand">SPIRIT8</a>
					</div>
					<div class="collapse navbar-collapse navbar-right" id="menu">
						<ul class="nav navbar-nav ">
							<li class="active"><a href="#">HOME</li></a>
							<li><a href="#aboutus">ABOUT</li></a>
							<li><a href="#service">SERVICES</li></a>
							<li><a href="#portfolio">PORTFOLIO</li></a>
							<li><a href="#testmonials">TESTIMONIALS</li></a>
							<li><a href="#contact">CONTACT</li></a>
						</ul>
					</div>
				</div>
			</nav>
		</header>
		<div class="box">
			<h1 class="wow bounceInDown">WELCOME on <span>spirit8</span></h1>
			<p class="wow bounceInLeft" data-wow-delay="0.9s">We are a digital agency with <b>years of experience</b> and with extraordinary people</p>
			<p><a class="btn  " href="#aboutus" role="button"><img src="img/downbutton_03.png"></a></p>
		</div>
		<div class="container mac " id="aboutus">
			<div class="row">
				<div class="col-md-7 col-xs-12 leftside wow bounceInLeft">
					<img src="img/mac_03.png" class="hidden-xs">
				</div>
				<div class="col-md-5 col-xs-12 rightside wow bounceInRight">
					<h3>ABOUT US</h3>
					<h1><span>SOMG</span> WORDS <b>ABOUT US</b></h1>
					<p>We love building and rebuilding brands through our specific skills. Using colour, fonts, and illustration, we
						brand companies in a way they will never forget.</p>
					<ul>
						<li>Mission - We deliver uniqueness and quality</li>
						<li>Skills - Delivering fast and excellent results</li>
						<li>Clients - Satisfied clients thanks to our experience</li>
					</ul>
					<button type="button"><img src="img/icon1.png">BROWSE OUR WORK</button>
				</div>
			</div>
		</div>
		<div class="container-fluid part3">
			<div class=" team">
				<h2 class="title-h2">MEET <span>OUR TEAM</span></h2>
				<hr class="hr1">
				<hr class="hr2">
			</div>

			<div class="container">
				<div class="row teams">

					<div class="col-lg-3 col-md-6 col-xs-12 wow swing" >
						<img src="img/photo1.jpg" class="img-circle img-responsive">
						<p>Jason Statham</p>
						<p>Knife designer</p>
						<p>Do not seek to change what has come before. Seek to create that which has not.</p>
					</div>
					<div class="col-lg-3 col-md-6 col-xs-12 wow swing">
						<img src="img/photo1.jpg" class="img-circle img-responsive">
						<p>Van Damme</p>
						<p>No English</p>
						<p>Do not seek to change what has come before. Seek to create that which has not.</p>
					</div>
					<div class="col-lg-3 col-md-6 col-xs-12 wow swing">
						<img src="img/photo1.jpg" class="img-circle img-responsive">
						<p>Sylvester Stallone</p>
						<p>Cigar Lover</p>
						<p>Do not seek to change what has come before. Seek to create that which has not.</p>
					</div>
					<div class="col-lg-3 col-md-6 col-xs-12 wow swing">
						<img src="img/photo1.jpg" class="img-circle img-responsive">
						<p>Jet Li</p>
						<p>I need more money</p>
						<p>Do not seek to change what has come before. Seek to create that which has not.</p>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="row part3-1">
					<ul>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="container-fluid part4" id="service">

			<div class=" team">
				<h2 class="title1-h2">TAKE A LOOK AT<span> OUR SERVICES</span></h2>
				<hr class="hr1">
				<hr class="hr2">
			</div>
			<div class="container">
				<div class="row text">
					<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good
						and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
						Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
				</div>
				<div class="row text1">
					<div class="col-lg-3 col-md-6 col-xs-12 wow rollIn ">
						<img src="img/1.png" class="img-circle img-responsive">
						<p>WEB DESIGN</p>
						<p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
					</div>
					<div class="col-lg-3 col-md-6 col-xs-12 wow rollIn  " data-wow-delay="0.5s">
						<img src="img/2.png" class="img-circle img-responsive">
						<p>MOBILE APPS</p>
						<p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
					</div>
					<div class="col-lg-3 col-md-6 col-xs-12 wow rollIn " data-wow-delay="0.7s">
						<img src="img/3.png" class="img-circle img-responsive">
						<p>PHOTOGRAPHY</p>
						<p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
					</div>
					<div class="col-lg-3 col-md-6 col-xs-12 wow rollIn " data-wow-delay="0.9s">
						<img src="img/4.jpg" class="img-circle img-responsive">
						<p>MARKETING</p>
						<p>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
					</div>
				</div>
			</div>
		</div>
		</div>
		<div class="container-fluid part3" id="">
			<div class="row team">
				<h2 class="title-h2">SOME OF <span>OUR CLIENTS</span></h2>
				<hr class="hr1">
				<hr class="hr2">
			</div>
			<div class="container ">
				<div class="row clients">
					<div class="col-lg-1"></div>
					<div class="col-lg-2"><img src="img/client1.png"></div>
					<div class="col-lg-2"><img src="img/client2.png"></div>
					<div class="col-lg-2"><img src="img/client3.png"></div>
					<div class="col-lg-2"><img src="img/client4.png"></div>
					<div class="col-lg-2"><img src="img/client5.png"></div>
					<div class="col-lg-1 "></div>
				</div>
			</div>

			<div class="container">
				<div class="row part3-1">
					<ul>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="container-fluid part4">

			<div class=" team">
				<h2 class="title1-h2">TAKE A LOOK AT<span> OUR WORK</span></h2>
				<hr class="hr1">
				<hr class="hr2">

				<div class="container" id="portfolio">
					<div class=" row text">
						<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good
							and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
							Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section
							1.10.32.</p>
					</div>

				</div>
				<div class="container">
					<div class="row link">
						<p class="col-lg-6 p1">Filter by type</p>
						<p class="col-lg-6 p2"><a href="#"><span>ALL</span></a> | <a href="#">Web design</a> | <a href="#">Mobile design</a>
							| <a href="#">Photograpy</a></p>
					</div>
				</div>
				<div class="container">
					<div class="row cds">
						<div class="col-lg-3 col-md-6 col-xs-12 ">
							<div class="img up"><img src="img/cd1.jpg">
								<div class="cdtext">
									<p>TREND AND FASHION</p>
									<p>Website design</p>
									<img src="img/more.png" >
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-6 col-xs-12 ">
							<div class="img up"><img src="img/cd1.jpg">
								<div class="cdtext">
									<p>TREND AND FASHION</p>
									<p>Website design</p>
									<img src="img/more.png" >
								</div>
							</div>

						</div>
						<div class="col-lg-3 col-md-6 col-xs-12">
							<div class="img up"><img src="img/cd1.jpg">
								<div class="cdtext">
									<p>TREND AND FASHION</p>
									<p>Website design</p>
									<img src="img/more.png" >
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-6 col-xs-12">
							<div class="img up"><img src="img/cd1.jpg">
								<div class="cdtext">
									<p>TREND AND FASHION</p>
									<p>Website design</p>
									<img src="img/more.png" >
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-6 col-xs-12">
							<div class="img up"><img src="img/cd2.jpg">
								<div class="cdtext">
									<p>TREND AND FASHION</p>
									<p>Website design</p>
									<img src="img/more.png" >
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-6 col-xs-12">
							<div class="img up"><img src="img/cd2.jpg">
								<div class="cdtext">
									<p>TREND AND FASHION</p>
									<p>Website design</p>
									<img src="img/more.png" >
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-6 col-xs-12">
							<div class="img up"><img src="img/cd2.jpg">
								<div class="cdtext">
									<p>TREND AND FASHION</p>
									<p>Website design</p>
									<img src="img/more.png" >
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-6 col-xs-12">
							<div class="img up"><img src="img/cd2.jpg">
								<div class="cdtext">
									<p>TREND AND FASHION</p>
									<p>Website design</p>
									<img src="img/more.png" >
								</div>
							</div>
						</div>

						<div class="col-lg-3 col-md-6 col-xs-12">
							<div class="img up"><img src="img/cd3.jpg">
								<div class="cdtext">
									<p>TREND AND FASHION</p>
									<p>Website design</p>
									<img src="img/more.png" >
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-6 col-xs-12">
							<div class="img up"><img src="img/cd3.jpg">
								<div class="cdtext">
								<p>TREND AND FASHION</p>
								<p>Website design</p>
								<img src="img/more.png" >
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-6 col-xs-12">
							<div class="img up"><img src="img/cd3.jpg">
								<div class="cdtext">
									<p>TREND AND FASHION</p>
									<p>Website design</p>
									<img src="img/more.png" >
								</div>
							</div>
						</div>
						<div class="col-lg-3 col-md-6 col-xs-12">
							<div class="img up"><img src="img/cd3.jpg">
								<div class="cdtext">
									<p>TREND AND FASHION</p>
									<p>Website design</p>
									<img src="img/more.png" >
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container-fluid part3" id="testmonials">
			<div class="row team">
				<h2 class="title-h2 "><span>SOUR CLIENT'S </span>TESTIMONIALS</h2>
				<hr class="hr1">
				<hr class="hr2">
			</div>
			<div class="container text3">
				<p>This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem
					Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
				<p><span>Dean Martin,</span> CEO Acme Inc.</p>
			</div>
			<div class="container">
				<div class="row part3-1">
					<ul>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="container-fluid part4" id="contact">

			<div class=" team">
				<h2 class="title1-h2">FEEL FREE TO<span> CONTACT US</span></h2>
				<hr class="hr1">
				<hr class="hr2">
			</div>
			<div class="container">
				<div class=" row text">
					<p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good
						and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the
						Renaissance. </p>
				</div>

			</div>
			<div class="container">
				<div class=" row inp">
					<div class="col-lg-6 col-md-6">name*<br /><input type="text" name=""></div>
					<div class="col-lg-6 col-md-6">Email address*<br /><input type="email" name=""></div>
					<div class="col-lg-12">Message*<br /><textarea></textarea></div>
					<div class="col-lg-12"><button>SEND</button></div>
				</div>
			</div>
		</div>
		<div class="container-fluid part3">
			<div class="container">
				<div class="row foot">
					<div class="col-lg-6 col-xs-12 bq">
						<p>ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</p>
					</div>
					<div class="col-lg-6 col-xs-12 icon"><img src="img/footericon1.png"><img src="img/footericon2.png"><img src="img/footericon3.png"><img
						 src="img/footericon4.png"><img src="img/footericon5.png"></div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/wow.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		new WOW().init();
	</script>
</html>
